/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-01-22 10:46:26
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-02-05 17:55:20
 * @FilePath: \my-book-react\src\pages\home\compoments\limitedRead\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import style from './index.module.scss';
import { Space, Card, Grid, Countdown } from '@/bases';
import BookCover from '@/components/bookCover';
import { useRequest } from '@/hooks/useRequest';
import api from '@/pages/home/api';
import { IHomeData } from '@/pages/home/types';
import { px2rem } from '@/utils/unit';
const time = 1000 * 60 * 60 * 30;
const LimitedRead: React.FC = React.memo(() => {
  const navigate = useNavigate();
  const { data } = useRequest<IHomeData>({ url: api.getHomeData });
  // console.log(data);
  const header = React.useMemo(() => {
    return (
      <div className={style.headerLeft}>
        <div className={style.title}> 限时免费</div>
        <div className={style.divider}>|</div>
        <Countdown time={time} format="hh:mm:ss" numClassName={style.num} symbolClassName={style.symbol} />
      </div>
    );
  }, []);
  const renderContent = () => {
    return data?.limited.map((book) => (
      <React.Fragment key={book.bookId}>
        <Grid.Item onClick={() => navigate(`/book/${book.bookId}`)}>
          <BookCover src={book.coverImg} alt={book.title} />
          <Space direction="vertical" gap={px2rem(6)}>
            <div className={style.bookName}>{book.title}</div>
            <div className={style.author}>{book.author}</div>
          </Space>
        </Grid.Item>
      </React.Fragment>
    ));
  };

  return (
    <div className={style.limitedRead}>
      <Card title={header} headerClassName={style.header}>
        <Grid columns={4} gap={px2rem(16)}>
          {renderContent()}
        </Grid>
      </Card>
    </div>
  );
});
export default LimitedRead;
